<template>
 <div>
  <div class="group-management">
    团队管理
  </div>
  <div id="title">
   <button @click="changes" class="bs ">我管理的团队</button> 
   <button @click="changess" class="bs">我加入的团队</button>
   <div class="right">
    <el-button type="primary" size="large" class="a" @click="creattd">新增医生团队</el-button>
    <el-button type="primary" size="large" class="a">申请加入团队</el-button>
   </div>
  </div>
  <hr> 
  <div class="m">
  <span>所属机构:</span>
  <el-select v-model="options.label" placeholder="请选择" size="large">
   
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  <el-input v-model="input" class="ipt" placeholder="请输入关键字" size="large" :suffix-icon="Search">
        <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>

</div>
<el-table
      stripe
      v-show="choose==true"
      class="list"
      ref="multipleTableRef"
      :data="users"
      style="width: 100%"
      header-align="center"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" width="100" align="center">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column property="tdphoto" label="头像" width="100" align="center"/>
      <el-table-column property="tdname" label="团队名称" width="100" align="center"/>
      <el-table-column property="tder" label="团队长" width="100" align="center"/>
      <el-table-column property="tdbq" label="团队标签" width="180" align="center"/>
      <el-table-column property="tdjg" label="所属机构" width="150" align="center"/>
      <el-table-column property="tdnum" label="签约人数" width="120" align="center"/>
      <el-table-column property="tdscord" label="评分" width="100" align="center"/>
      <el-table-column property="tdzt" label="状态" width="120" align="center">
        <el-switch
    v-model="value"
    active-color="#3DD4A7"
    inline-prompt
    size="large"
    active-text="启用"
    inactive-text="禁用"
  />
      </el-table-column>
      <el-table-column property="tdxq" label="详情" width="100" align="center">
        <span>详情</span>
      </el-table-column>
      <div class="pages">
    <el-pagination background layout="prev, pager, next" :total="100" />
  </div>
    </el-table>

    <el-table
    stripe
      v-show="chooses==true"
      class="list"
      ref="multipleTableRef"
      :data="userss"
      style="width: 100%"
      header-align="center"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" width="100" align="center">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column property="tdphoto" label="头像" width="100" align="center"/>
      <el-table-column property="tdname" label="团队名称" width="100" align="center"/>
      <el-table-column property="tder" label="团队长" width="100" align="center"/>
      <el-table-column property="tdbq" label="团队标签" width="180" align="center"/>
      <el-table-column property="tdjg" label="所属机构" width="150" align="center"/>
      <el-table-column property="tdnum" label="签约人数" width="120" align="center"/>
      <el-table-column property="tdscord" label="评分" width="100" align="center"/>
      <el-table-column property="tdzt" label="状态" width="120" align="center">
       <span style="color:#3DD4A7">启用中</span>
      </el-table-column>
      <el-table-column property="tdxq" label="详情" width="100" align="center">
        <span>详情</span>
      </el-table-column>
    </el-table>
    <div class="pages">
    <el-pagination background layout="prev, pager, next" :total="100" />
  </div>
 </div>

</template>
<script>
export default {
  name: 'GroupManagement',
  data() {
    return {
      users: Array(10).fill(null).map((_, index) => ({
        "tdphoto":"图片" + index ,
        "tdname": "胡hh团队",
        "tder": "胡hh",
        "tdbq": "高血压 冠心病 高血糖",
        "tdjg": "北京市怀柔区洛西社区卫生服务站" + index,
        "tdnum": "500" ,
        "tdscord": "4.9",
        "tdxq": "查看详情",
        "id": index + 20220
      })),
      userss: Array(10).fill(null).map((_, index) => ({
        "tdphoto": "图片" + index,
        "tdname": "cb团队",
        "tder": "cb",
        "tdbq": "高血压 冠心病 高血糖",
        "tdjg": "北京市怀柔区洛西社区卫生服务站" + index,
        "tdnum": "500" ,
        "tdscord": "4.9",
        "tdxq": "查看详情",
        "id": index + 20220
      })),
      value:true,
      choose:true,
      chooses:false,
      act:'',
      options:[
  {
    value: 'Option2',
    label: '罗西社区服务中心',
  },
  {
    value: 'Option3',
    label: '天明服务中心',
  },
  {
    value: 'Option4',
    label: '民进服务中心',
  },
    ],
    
    input:'',
    }
  },
  methods: {
    creattd(){
      this.$router.push('newtd')
    },
    changes(){
      this.choose=true,
      this.chooses=false,
      console.log(this.choose)
    },
    changess(){
      this.chooses=true
      this.choose=false,
      console.log(this.chooses)
    },
  },
}
</script>

<style>
body{
  min-width: 1196px;
}
.active{
  color: #2984F8;
  border-bottom: 3px solid #2984F8;
}
#title{
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#title .right{
  height: 50px;
  width: 300px;
  display: flex;
  justify-content: space-around;
  align-items: center;
 margin-left: 625px;
}
#title .a{
  width: 120px;
  text-align: center;
  font-size: 14px;
  margin: 0;
}
#title .bs{
  width: 150px;
  height: 65px;
  margin-right: 15px;
  font-weight: 800;
}
.m{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.ipt{
  margin-left: 30px;
  width: 500px;
}
.ipt .el-input__icon{
  font-size: 18px;
}
.list{
  margin-top: 20px;
}
.pages{
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
